<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../commn/base.css" />
		<link rel="stylesheet" type="text/css" href="../css/weui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/jquery-weui.min.css" />
		<link rel="stylesheet" type="text/css" href="../Hui-iconfont/1.0.8/iconfont.css" />
		<style type="text/css">
			body {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				width: 100%;
				background-color: #EFEFF4;
			}
			
			.index {
				min-width: 240px;
			}
			
			.top {
				display: -webkit-box;
				width: 100%;
				height: 40px;
				position: fixed;
				background-color: #0F88EB;
			}
			
			.top>span {
				line-height: 40px;
				text-indent: 1em;
				color: white;
				display: -webkit-box;
				font-size: 18px;
				font-weight: bold;
				-webkit-box-flex: 1;
			}
			
			.back {
				color: white;
				font-size: 18px;
				margin-left: 15px;
				line-height: 40px;
			}
			
			.title {
				margin: 10px;
				height: 40px;
				outline: none;
				border-bottom: 1px solid #EEEEEE;
			}
			
			.content {
				margin: 10px;
				height: 300px;
				outline: none;
				border-bottom: 1px solid #EEEEEE;
			}
			
			.data {
				display: -webkit-box;
				height: 70px;
				margin: 3px;
				border: 1px solid #EEEEEE;
				background-color: white;
			}
			
			.answer {
				display: -webkit-box;
				min-height: 80px;
				border-bottom: 1px solid #EEEEEE;
			}
			
			.detail_photo,
			.answer_aa {
				width: 50px;
				height: 50px;
				margin: 10px;
				border-radius: 40px;
				border: 1px solid #EEEEEE;
				overflow: hidden;
			}
			
			.detail_photo img,
			.answer_aa img {
				width: 50px;
				height: 50px;
			}
			
			.answer_name {
				-webkit-box-flex: 1;
			}
			
			.answer_name>p:nth-child(1) {
				font-size: 16px;
				font-weight: bold;
			}
			
			.answer_name>p:nth-child(1)>span {
				float: right;
				margin: 5px;
				font-size: 12px;
				color: #9B9B9B;
			}
			
			.detail_name {
				-webkit-box-flex: 1;
			}
			
			.detail_name>p {
				height: 30px;
				line-height: 35px;
			}
			
			.detail_name>p:nth-child(1) {
				font-weight: bold;
				line-height: 40px;
			}
			
			.detail_name>p:nth-child(2) {
				font-size: 14px;
				color: #999999;
			}
			
			.add {
				width: 70px;
				margin: 20px 10px;
				text-align: center;
				font-weight: bold;
				color: #0F88EB;
				height: 30px;
				line-height: 30px;
				border-radius: 8px;
				border: 2px solid #0F88EB;
			}
			
			.detail_article {
				margin: 3px;
				border: 1px solid #EEEEEE;
				min-height: 150px;
				background-color: white;
				margin-bottom: 65px;
			}
			
			.detail_article1 {
				margin: 3px;
				border: 1px solid #EEEEEE;
				min-height: 70px;
				background-color: white;
			}
			
			.detail_article>p:nth-child(1) {
				text-indent: 1em;
				font-size: 16px;
				color: #9B9B9B;
				line-height: 30px;
				font-weight: bold;
				border-bottom: 1px solid #EEEEEE;
			}
			
			.detail_article1>p:nth-child(1) {
				text-indent: 1em;
				font-size: 16px;
				line-height: 30px;
				font-weight: bold;
				padding: 8px;
				word-break: break-all;
				border-bottom: 1px solid #EEEEEE;
			}
			
			.detail_article p:nth-child(2),
			.detail_article1 p:nth-child(2) {
				font-size: 18px;
				line-height: 30px;
				padding: 10px;
				padding: 8px;
				word-break: break-all;
			}
			
			.detail_article1 p:nth-child(3),
			.detail_article1 p:nth-child(4) {
				font-size: 13px;
				color: #9B9B9B;
				line-height: 30px;
				padding: 8px;
				border: 1px solid #EEEEEE;
			}
			
			.bottom {
				display: -webkit-box;
				width: 100%;
				height: 60px;
				position: fixed;
				bottom: 0px;
				background-color: white;
			}
			
			.bottom>a {
				display: block;
			}
			
			.bottom>div:nth-of-type(1) {
				width: 60px;
				height: 30px;
				position: relative;
				top: 10px;
				left: 20px;
				color: #0F88EB;
				border: 1px solid #0F88EB;
				font-size: 20px;
				line-height: 30px;
				padding: 5px 20px;
				border-radius: 10px;
				color: white;
				text-align: center;
				background-color: #0F88EB;
			}
			
			.bottom>div:nth-of-type(3) {
				color: #9B9B9B;
				width: 50px;
				height: 60px;
				font-size: 30px;
				line-height: 60px;
				text-align: center;
			}
			
			.null {
				-webkit-box-flex: 1;
			}
			
			.on {
				color: gold;
			}
		</style>
	</head>

	<body>
		<div class="index">
			<div class="top">
				<a href="../zhihu_discovery/discovery.html" class="back Hui-iconfont Hui-iconfont-slider-left"></a>
				<span class="">
					问题详情
				</span>
			</div>
			<div style="height: 45px;"></div>
			<div class="data" v-for="lee in message">
				<div class="detail_photo">
					<img src="../common/img/1.jpg" />
				</div>
				<div class="detail_name">
					<p v-html="lee.user_id"></p>
					<p>简介</p>
				</div>
				<div class="add" @click="guan()" v-html="guanzhu"></div>
			</div>
			<div class="detail_article1" v-for="lee in message">
				<p v-html="lee.title"></p>
				<p v-html="lee.context"></p>
				<p>悬赏金额：<span v-html="lee.money"></span></p>
				<p>发帖时间：<span v-html="lee.time"></span></p>
			</div>
			<div class="detail_article">
				<p>回答列表</p>
				<div class="answer" v-for="well in p_message">
					<div class="answer_aa">
						<img src="../common/img/1.jpg" />
					</div>
					<div class="answer_name">
						<p v-html="well.p_id"><span v-html="well.p_time"></span></p>
						<p v-html="well.p_text"></p>
					</div>
				</div>
			</div>
			<div class="bottom" v-for="lee in message">
				<div @click="link(lee.id)" style="cursor: pointer;">回答</div>
				<div class="null"></div>
				<div>
					<p class="Hui-iconfont Hui-iconfont-cang2" :class="{on:ison}" @click="shoucang()"></p>
				</div>

			</div>
		</div>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var newVue = new Vue({
				el: "body",
				data: {
					message: [],
					p_message: [],
					isguanzhu: false,
					guanzhu: "+关注",
					ison: false
				},
				methods: {
					link: function(e) {
						huida(e) 
					},
					guan: function() {
						newVue.isguanzhu = !newVue.isguanzhu;
						if(newVue.isguanzhu) {
							newVue.guanzhu = "已关注";
						} else {
							newVue.guanzhu = "+关注";
						}
					},
					shoucang: function() {
						this.ison = !this.ison
						shoucang()
					}
				}
			})
			var ss;
			var dd;
			var index;
			var reg = new RegExp("(^|&)" + "id" + "=([^&]*)(&|$)", "i");
			var r = window.location.search.substr(1).match(reg);
			if(r != null) {
				console.log(unescape(r[2]));
				index = unescape(r[2]);
			} else {
				console.log(null);
			};
			$.ajax({
				type: 'get',
				//async:false,
				url: "http://v2.mashupcloud.cn/developer/auth.do",
				data: {
					appkey: 'FvWrIYOQoTUYVbscUNQoQAVqsLnZqKEN',
					appsecret: 'ugCfcSmyLkcbCGfIuFOPEgTgPQPbyJSE'

				},
				success: function(json) {
					//		            console.log(json);
					ss = JSON.parse(json)[1];
					dd = JSON.parse(json)[2];
					console.log('获得token成功');
					$.ajax({
						type: 'get',
						url: "http://v2.mashupcloud.cn/SQL/sele_tie_id/",
						data: {
							appid: dd,
							token: ss,
							name: 'sele_tie_id',
							_v1: index
						},
						success: function(json) {
							console.log(JSON.parse(json));
							newVue.message = JSON.parse(json)[2];
						},
						error: function(json) {
							console.log("err:" + json);
						}
					});
				},
				error: function(json) {
					console.log("err:" + json);
				}
			});

			$.ajax({
				type: 'get',
				//async:false,
				url: "http://v2.mashupcloud.cn/developer/auth.do",
				data: {
					appkey: 'FvWrIYOQoTUYVbscUNQoQAVqsLnZqKEN',
					appsecret: 'ugCfcSmyLkcbCGfIuFOPEgTgPQPbyJSE'

				},
				success: function(json) {
					//		            console.log(json);
					ss = JSON.parse(json)[1];
					dd = JSON.parse(json)[2];
					console.log('获得token成功');
					$.ajax({
						type: 'get',
						url: "http://v2.mashupcloud.cn/SQL/sele_ping/",
						data: {
							appid: dd,
							token: ss,
							name: 'sele_ping',
							_v1: index
						},
						success: function(json) {
							console.log(JSON.parse(json));
							newVue.p_message = JSON.parse(json)[2];
						},
						error: function(json) {
							console.log("err:" + json);
						}
					});
				},
				error: function(json) {
					console.log("err:" + json);
				}
			});

			function shoucang() {
				$.ajax({
					type: 'get',
					//async:false,
					url: "http://v2.mashupcloud.cn/developer/auth.do",
					data: {
						appkey: 'FvWrIYOQoTUYVbscUNQoQAVqsLnZqKEN',
						appsecret: 'ugCfcSmyLkcbCGfIuFOPEgTgPQPbyJSE'

					},
					success: function(json) {
						//		            console.log(json);
						ss = JSON.parse(json)[1];
						dd = JSON.parse(json)[2];
						console.log('获得token成功');
						$.ajax({
							type: 'get',
							url: "http://v2.mashupcloud.cn/SQL/add_coll/",
							data: {
								appid: dd,
								token: ss,
								name: 'add_coll',
								_v1: sessionStorage.getItem('nicheng'),
								_v2: index
							},
							success: function(json) {
								console.log(JSON.parse(json));
							},
							error: function(json) {
								console.log("err:" + json);
							}
						});
					}

				});
			}

			function huida(e) {
				var id = sessionStorage.getItem("id");
				if(id == null) {
					alert("需要登录才能进行相关操作")
					location.href = "../zhihu_index/index.html"
				} else {
					location.href = "../zhihu_question/answer.html?id=" + e;

				}
			}
		</script>
	</body>

</html>